<template>

   <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.leavename" placeholder="请输入申请人姓名" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="warning" @click="exportToExcel">导出</el-button>
    </el-form-item>
  </el-form>

  
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="姓名/请假月份" width="120px"/>

    <el-table-column v-for="item in months"  :label="item">
        <template v-slot="{row}">
            <el-button link v-if="row[item]!=0" @click="getperson(row.name,item)">
                <span :style="{color: row[item] > 0 ? 'red' : '', textDecoration: row[item] > 0 ? 'underline' : ''}">
                 {{ row[item] || 0 }}
                </span>
            </el-button>
            <span v-else :style="{color: row[item] > 0 ? 'red' : '', textDecoration: row[item] > 0 ? 'underline' : ''}">
                 {{ row[item] || 0 }}
                </span>
        </template>
    </el-table-column>
    
  </el-table>


  <el-dialog v-model="dialogTableVisible" title="请假记录" width="800px">

     <el-table
        :data="tableDataperson"
        style="width: 100%"
      >
        <el-table-column type="index" label="编号" width="60px"/>
        <el-table-column prop="applicationName" label="姓名" width="60px"/>
        <el-table-column prop="departmentId" label="部门" width="100px">
          <template v-slot="a">
            <span v-if="a.row.departmentId==1">IT信息部</span>
            <span v-if="a.row.departmentId==2">人力资源部</span>
            <span v-if="a.row.departmentId==3">财务部</span>
            <span v-if="a.row.departmentId==4">销售部</span>
            <span v-if="a.row.departmentId==5">行政部</span>
          </template>
        </el-table-column>
        <el-table-column prop="leaveTypeName" label="请假类别" width="100px"/>
        <el-table-column prop=" " label="请假时间" width="190px">
          <template v-slot="a">
            <span>{{ moment(a.row.startTime).format("YYYY-MM-DD") }}至{{ moment(a.row.endTime).format("YYYY-MM-DD") }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="reason" label="请假事由"/>
    
  </el-table>


  </el-dialog>


</template>

<script lang="ts" setup>
import { ref,reactive,onMounted, watch, nextTick } from 'vue';
import axios from 'axios';
import moment from 'moment';
import httpr from '@/axioslan/axioshttp'
import httpw from '@/axioslan/axioshttps'
onMounted(()=>
{
    search();
})


let formInline:any=reactive
   ({
    leavename:''
   })


const tableData =ref<LeaveSummartRow[]>([])
const months=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
interface LeaveSummartRow{
    name:string
    [month:string]:any
}

const search=()=>
{
    httpr
    ({
        url:'/api/Leave/GetLeaveReport',
        method:'get',
        params:
        {
            leavename:formInline.leavename
        }
    })
    .then(res=>{
       if(res.data.code==200)
       {
         var list=res.data.data.leaveApplicationList;
        tableData.value=Object.entries(list).map(([name,monthsData])=>
        {
            const row:LeaveSummartRow={name}
            months.forEach((month,index)=>
            {
                row[month]=Array.isArray(monthsData)&&monthsData[index]? monthsData[index]:0
            })
            return row;
        })
       }

    })
}

//导出
import * as xlsx from 'xlsx'

const exportToExcel=()=>
{
    const exportData=tableData.value.map(row=>
        {
            const newrow:any={'姓名/请假月份':row.name}
            months.forEach(month=>
                {
                    newrow[month]=row[month]||0
                })
                return newrow;
        })

        const ws=xlsx.utils.json_to_sheet(exportData)

        const wb=xlsx.utils.book_new();
        xlsx.utils.book_append_sheet(wb,ws,"请假汇总")

        xlsx.writeFile(wb,`请假汇总_${new Date().toLocaleDateString()}.xlsx`)

}

const dialogTableVisible = ref(false)
const tableDataperson=ref([])
const getperson=(name:any,row:any)=>
{

  dialogTableVisible.value=true;
    httpr({
    url: "/api/Leave/GetLeavePresonData",
    method: "get",
    params:
    {
      leaveName:name,
      startMonth:row
    }
  }).then((res) => {
    console.log(formInline.statetime);
    console.log(formInline.endtime);
    
    tableDataperson.value = res.data.data;
  });
}



</script>


<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>